<template>
    <!-- 修改资料 -->

    <div>
        <!-- 内容主题区域 -->
        <el-form label-width="85px" :model="form" label-position="right" ref="formRef" :rules="formRules">
            <el-form-item label="上级菜单" prop="parentId">
                <el-tree-select v-model="form.parentId" :data="menuData" :render-after-expand="false" :check-strictly=true
                    clearable style="width: 400px;" />
            </el-form-item>
            <el-form-item label="菜单标题" prop="title">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="打开方式" prop="target" v-if="form.menuType !== 'button'">
                <el-select v-model="form.target" clearable placeholder="请选择：" style="width: 400px;">
                    <el-option v-for="item in targetOptions" :key="item.code" :label="item.name" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="菜单类型" prop="menuType">
                <el-radio-group v-model="form.menuType" style="margin-top: -4px;">
                    <template v-for="(item, index) in menuTypeList" :key="index">
                        <el-radio :label="item.number" size="large">{{ item.name }}</el-radio>
                    </template>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单图标" prop="icon" v-if="form.menuType !== 'button'">
                <el-popover placement="bottom-start" :width="540" v-model:visible="showChooseIcon" trigger="click"
                    @show="showSelectIcon">
                    <template #reference>
                        <el-input v-model="form.icon" placeholder="点击选择图标" v-click-outside="hideSelectIcon" readonly>
                            <template #prefix>
                                <el-icon v-if="form.icon">
                                    <component :is="form.icon" />
                                </el-icon>
                                <el-icon v-else style="height: 32px;width: 16px;">
                                    <Search />
                                </el-icon>
                            </template>
                        </el-input>
                    </template>
                    <iconSelect ref="iconSelectRef" @selected="selected" :active-icon="form.icon" />
                </el-popover>
            </el-form-item>
            <el-row>
                <el-col>
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="显示排序" prop="itemIndex">
                        <el-input-number v-model="form.itemIndex" :min="0" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="路由地址" prop="path">
                        <el-input v-model="form.path"></el-input>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="路由参数" prop="routerParams" v-if='form.menuType !== "button"'>
                        <el-input v-model="form.routerParams"></el-input>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="关联接口" prop="refUrls">
                        <el-input v-model="form.refUrls"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if='form.menuType == "menu"'>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="组件路径" prop="component">
                        <el-input v-model="form.component"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单是否隐藏" prop="hidden" label-width="120px">
                        <el-switch v-model="form.hidden" size="large" inline-prompt :active-icon="Check"
                            :inactive-icon="Close" />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="是否全屏显示" prop="fullpage" label-width="120px">
                        <el-switch v-model="form.fullpage" size="large" inline-prompt :active-icon="Check"
                            :inactive-icon="Close" />
                    </el-form-item>
                    <el-form-item label="是否固定" prop="affix">
                        <el-switch v-model="form.affix" size="large" inline-prompt :active-icon="Check"
                            :inactive-icon="Close" />
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row >
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="form.menuType !== 'button'">
                    <el-form-item label="显示状态" prop="visible">
                        <el-switch v-model="form.visible" size="large" inline-prompt :active-icon="Check"
                            :inactive-icon="Close" active-value="1" inactive-value="0" />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="form.menuType !== 'button'">
                    <el-form-item label="菜单状态">
                        <el-radio-group v-model="form.status" style="margin-top: -4px;">
                            <template v-for="(item, index) in statusList" :key="index">
                                <el-radio :label="item.number" size="large">{{ item.name }}</el-radio>
                            </template>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="是否验证" prop="verifyPerm">
                        <el-switch v-model="form.verifyPerm" size="large" inline-prompt :active-icon="Check"
                            :inactive-icon="Close" />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="是否缓存">
                        <el-switch v-model="form.keepLive" size="large" inline-prompt :active-icon="Check"
                            :inactive-icon="Close" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="button-position">
            <el-button @click="updateVisible">取 消</el-button>
            <el-button type="primary" @click="updateMenu(formRef)">确 定</el-button>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import { ElNotification } from 'element-plus';
import iconSelect from '@/views/system/menu/commpents/iconSelect.vue'
import { ClickOutside as vClickOutside } from 'element-plus'
import { Search } from '@element-plus/icons-vue';
import Api from '@/api/model/system'
const visible = ref(true)
const emit = defineEmits(['updatetable'])


const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
onMounted(() => {
    getInit()
    getData()
})

//选择器等列表数据
const menuData = ref()
const targetOptions = ref([])
const menuTypeList = ref()
const statusList = ref()


const showChooseIcon = ref(false);
const iconSelectRef = ref(null);
const iconSrc = ref();
const loading = ref(false)



// 添加用户数据的对象
const form = ref({})

const formRef = ref()
const formRules = reactive({
})

const updateVisible = () => {
    emit('updatetable')
}



const restupdateFormData = () => {
    formRef.value.resetFields();
}

const getInit = async () => {
    let listRes = await Api.menu.add.post();
    let params = {
        fileName: 'SysMenuTreeReport'
    }
    let treeRes = await Api.menu.moduleTree.post(params)
    menuTypeList.value = listRes.configData.menuTypeList
    statusList.value = listRes.configData.statusList
    targetOptions.value = listRes.configData.targetList
    menuData.value = treeRes.reportData
}

const getData = async () => {
    loading.value = true;
    let res = await Api.menu.detail.post(props.paramsData);
    loading.value = false;
    if (res.code == 200) {
        form.value = res.data;
        iconSrc.value = res.data.iconPath
    } else {
        form.value = '';
    }

}

/** 展示下拉图标 */
function showSelectIcon() {
    iconSelectRef.value.reset();
    showChooseIcon.value = true;
}
/** 选择图标 */
function selected(param1, param2) {
    form.value.icon = param1
    iconSrc.value = param2
    showChooseIcon.value = false;
}
/** 图标外层点击隐藏下拉列表 */
function hideSelectIcon(event) {
    // var elem = event.relatedTarget || event.srcElement || event.target || event.currentTarget;
    // var className = elem.className;
    // if (className !== "el-input__inner") {
    //     showChooseIcon.value = false;
    // }
}


// 上传
const updateMenu = async (formRef) => {
    await formRef.validate((valid, fields) => {
        if (valid) {
            update();

        }
    })
}

const update = async () => {
    let params = {
        bean: form.value,
    }
    let res = await Api.menu.update.post(params);
    if (res.code == 200) {
        restupdateFormData()
        ElNotification.success({ title: '', message: '修改成功！', duration: 2000 });
        emit('updatetable', true);
    }
}

</script>

<style lang="scss" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }
}
</style>

